<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">
    <!--<arr ref="arr"></arr>-->
    <ul>
        <template v-for="item in arrs">
            <li>{{ item }}</li>

        </template>
    </ul>
</div>

<!--push() 在數組最后添加一个
pop() 从数组最后删除一个
shift() 从数组首部添加一个
unshift() 从数组首部删除一个
splice(int) 从数组最后删除多少个
sort()
reverse()-->
<template id="arr">
    <div>
        <ul>
            <li v-for="arr,index in newarrs" v-bind:key="index">-{{arr}}</li>
        </ul>


        <ul v-for="set in sets">
            <li v-for="n in even(set)">{{ n }}</li>
        </ul>

    </div>


</template>


<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script>


    const data = {
        name: '张三',
        items: [
            {id: 1, text: '广东'}
        ],
        sets: [[1, 2, 3, 4, 5], [6, 7, 8, 9, 10]],
        arrs: [1, 2, 3, 4, 5],
        message: 'Hello',
    };


    const vm = new Vue({
        el: '#app',
        data:{

            arrs2: ['a', 'b', 'c']
        },
        components: {
            arr: {
                template: "#arr",
                data() {
                    return data
                },
                computed: {
                    newarrs() {
                        return this.arrs.filter(function (item) {
                            return item > 1
                        })
                    }
                },
                methods: {
                    even: function (numbers) {
                        return numbers.filter(function (number) {
                            return number % 2 === 0
                        })

                    }
                }
            }
        },

        computed: {
            // 计算属性的 getter
            reversed: {

                get: function () {
                    // `this` 指向 vm 实例
                    return this.message.split('').reverse().join('')
                },
                set: function (newv) {
                    this.message = newv;
                    alert("我在摄制组加入新值" + newv)
                }
            }


        },
        methods: {}
    })


</script>
</body>
</html>